<template>
  <el-row type="flex" justify="space-between" style="width: 100%;">
    <el-col>
      <!-- 动态渲染样式 -->
      <span :style="{fontWeight: isCompany ? '' : 700}">{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">

      <el-row type="flex" justify="end">
        <el-col><span>{{ treeNode.manager }}</span></el-col>
        <el-col>
          <el-dropdown>
            <span>操作
              <i class="el-icon-arrow-down" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <!--
                1. 添加点击事件
               -->
              <el-dropdown-item v-show="checkPermission('add-departments')" @click.native="addFn">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="isCompany" v-show="checkPermission('edit-departments')" @click.native="editFn">编辑部门</el-dropdown-item>
              <el-dropdown-item v-if="isCompany" v-show="checkPermission('del-departments')" @click.native="removeFn">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    treeNode: {
      type: Object, // 接收类型
      required: true // 必传
    },
    isCompany: { // 是否显示编辑和修改
      type: Boolean,
      default: true
    }
  },
  // computed: {
  //   points() {
  //     return this.$store.state.user.userInfo.roles.points
  //   }
  // },
  methods: {
    addFn() {
      // 3.子传父事件
      // 将当前部门信息传过去
      this.$emit('addEvent', this.treeNode)
    },
    // removeFn：点击删除部门
    removeFn() {
      // 3.子传父事件
      // 将当前部门id传过去
      this.$emit('removeEvent', this.treeNode.id)
    },
    editFn() {
      this.$emit('editEvent', this.treeNode)
    }
  }

}
</script>

<style scoped>

</style>
